<!DOCTYPE html>
<html>
  <head>
    <th:block th:include="include :: login('后端管理系统')" />
    <!-- [if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      body {
        background: #1e9fff;
      }
      body:after {
        content: "";
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-filter: blur(3px);
        -moz-filter: blur(3px);
        -o-filter: blur(3px);
        -ms-filter: blur(3px);
        filter: blur(3px);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
      }
      .layui-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .admin-login-background {
        width: 360px;
        height: 300px;
        position: absolute;
        left: 50%;
        top: 40%;
        margin-left: -180px;
        margin-top: -100px;
      }
      .logo-title {
        text-align: center;
        letter-spacing: 2px;
        padding: 14px 0;
      }
      .logo-title h1 {
        color: #1e9fff;
        font-size: 25px;
        font-weight: bold;
      }
      .login-form {
        background-color: #fff;
        border: 1px solid #fff;
        border-radius: 3px;
        padding: 14px 20px;
        box-shadow: 0 0 8px #eeeeee;
      }
      .login-form .layui-form-item {
        position: relative;
      }
      .login-form .layui-form-item label {
        position: absolute;
        left: 1px;
        top: 1px;
        width: 38px;
        line-height: 36px;
        text-align: center;
        color: #d2d2d2;
      }
      .login-form .layui-form-item input {
        padding-left: 36px;
      }
      .captcha {
        width: 60%;
        display: inline-block;
      }
      .captcha-img {
        display: inline-block;
        width: 34%;
        float: right;
      }
      .captcha-img img {
        height: 34px;
        border: 1px solid #e6e6e6;
        height: 36px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="layui-container">
      <div class="admin-login-background" id="loginSys">
        <div class="layui-form login-form">
          <form class="layui-form" action="">
            <div class="layui-form-item logo-title">
              <h1>欢迎登录</h1>
            </div>
            <div class="layui-form-item">
              <label class="layui-icon layui-icon-username" for="username"></label>
              <input
                type="text"
                name="username"
                lay-verify="required|account"
                placeholder="用户名或者邮箱"
                autocomplete="off"
                class="layui-input"
                value="admin"
              />
            </div>
            <div class="layui-form-item">
              <label class="layui-icon layui-icon-password" for="password"></label>
              <input
                type="password"
                name="password"
                lay-verify="required|password"
                placeholder="密码"
                autocomplete="off"
                class="layui-input"
                value="QQZX@qqonline1234"
              />
            </div>
            <div class="layui-form-item">
              <label class="layui-icon layui-icon-vercode" for="captcha"></label>
              <input
                type="text"
                name="captcha"
                lay-verify="required|captcha"
                placeholder="图形验证码"
                autocomplete="off"
                class="layui-input verification captcha"
                value="xszg"
              />
              <div class="captcha-img">
                <img id="captchaPic" src="/images/captcha.jpg" />
              </div>
            </div>
            <div class="layui-form-item">
              <input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码" />
            </div>
            <div class="layui-form-item">
              <button
                class="layui-btn layui-btn layui-btn-normal layui-btn-fluid"
                lay-submit=""
                lay-filter="login"
              >
                登 入
              </button>
            </div>
          </form>
        </div>
      </div>

      <div class="admin-login-background" id="selectDept" style="display: none">
        <div class="layui-form login-form">
          <form class="layui-form" action="">
            <div class="layui-form-item logo-title">
              <h1>请选择部门</h1>
            </div>
            <div class="layui-form-item">
              <label class="layui-icon layui-icon-username" for="username"></label>

              <div class="layui-inline" style="width: 235px">
                <input name="" placeholder="请选择部门" class="layui-input" id="dropdown-depts" />
              </div>
            </div>
            <div class="layui-form-item">
              <button
                class="layui-btn layui-btn layui-btn-normal layui-btn-fluid"
                lay-submit=""
                lay-filter="selectDept"
              >
                返回登录
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <th:block th:include="include :: base" />
    <script>
      layui.use(["form"], function () {
        var form = layui.form,
          layer = layui.layer,
          dropdown = layui.dropdown;

        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) top.location = self.location;

        // 粒子线条背景
        $(document).ready(function () {
          $(".layui-container").particleground({
            dotColor: "#7ec7fd",
            lineColor: "#7ec7fd",
          });
        });

        // 进行登录操作
        form.on("submit(login)", function (data) {
          $.ajax({
            url: "/login",
            data: data.field,
            type: "post",
            dataType: "json",
            success: function (result) {
              if (result.success) {
                let data = result.data;
                if (data.userId == 1) {
                  location.href = "/index";
                } else {
                  $("#loginSys").hide();
                  $("#selectDept").show();
                  $.ajax({
                    url: "/sys-user/dept/query",
                    type: "post",
                    async: false,
                    success: function (result) {
                      if (result.success) {
                        if (result.data.length == 1) {
                          $.ajax({
                            url: "/sys-user/dept/" + result.data.deptId,
                            type: "post",
                            async: false,
                            success: function (result) {
                              location.href = "/index";
                            },
                          });
                        } else if (result.data.length > 1) {
                          let data = [];
                          for (let elem of result.data.values()) {
                            let deptItem = {};
                            deptItem.id = elem.deptId;
                            deptItem.title = elem.deptName;
                            data.push(deptItem);
                          }
                          dropdown.render({
                            elem: "#dropdown-depts", // 绑定元素选择器，此处指向 class 可同时绑定多个元素
                            data: data,
                            click: function (obj) {
                              this.elem.val(obj.title);
                              $.ajax({
                                url: "/sys-user/dept/" + obj.id,
                                type: "post",
                                async: false,
                                success: function (result) {
                                  location.href = "/index";
                                },
                              });
                            },
                          });
                        }
                      }
                    },
                  });
                }
              } else {
                layer.msg(result.msg, function () {});
              }
            },
          });
          return false;
        });

        form.on("submit(selectDept)", function (data) {
          $.ajax({
            url: "/logout",
            type: "get",
            success: function (result) {
              if (result.success) {
                location.href = "/index";
              } else {
                layer.msg(result.msg, function () {});
              }
            },
          });
          return false;
        });
      });
    </script>
  </body>
</html>
